<template>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;min-height: 20px;"
    :style="{
      'background': nodeModel.configDict.componentStyle.background,
      'marginTop': nodeModel.configDict.componentStyle.marginTop/2+'px',
      'marginBottom': nodeModel.configDict.componentStyle.marginBottom/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'marginRight': nodeModel.configDict.componentStyle.marginLeft/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTop/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottom/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeft/2+'px',
    }">
    <div style="display: flex;"
    :style="{
      'width': nodeModel.configDict.componentStyle.widthForFlex1/2+'px',
      'flex-direction': nodeModel.configDict.componentStyle.flex_directionForFlex1,
      'align-items': nodeModel.configDict.componentStyle.align_itemsForFlex1,
      'justify-content': nodeModel.configDict.componentStyle.justify_contentForFlex1,
      'background': nodeModel.configDict.componentStyle.backgroundForFlex1,
      // 'marginTop': nodeModel.marginTopForFlex1/2+'px',
      'marginLeft': nodeModel.configDict.componentStyle.marginLeftForFlex1/2+'px',
      'paddingTop': nodeModel.configDict.componentStyle.paddingTopForFlex1/2+'px',
      'paddingBottom': nodeModel.configDict.componentStyle.paddingBottomForFlex1/2+'px',
      'paddingLeft': nodeModel.configDict.componentStyle.paddingLeftForFlex1/2+'px',
      'paddingRight': nodeModel.configDict.componentStyle.paddingLeftForFlex1/2+'px',
    }">
      <div v-if="nodeModel.configDict.componentStyle.isShowForText1 && nodeModel.configDict.componentStyle.titleForText1" :style="{
          'marginTop': nodeModel.configDict.componentStyle.marginTopForText1/2+'px',
          'color': nodeModel.configDict.componentStyle.colorForText1,
          'font-size': nodeModel.configDict.componentStyle.fontsizeForText1/2 + 'px',
          'font-weight': nodeModel.configDict.componentStyle.fontweightForText1,
        }">{{nodeModel.configDict.componentStyle.titleForText1}}</div>
      <div style="width: 140px;height: 50px;margin-right: 20px;background-color: #234fc2;color: #FFFFFF;line-height: 50px;text-align: center;border-radius: 25px;"
      :style="{
        'width': nodeModel.configDict.componentStyle.widthForBtn1/2 + 'px',
        'height': nodeModel.configDict.componentStyle.heightForBtn1/2 + 'px',
        'line-height': nodeModel.configDict.componentStyle.heightForBtn1/2 + 'px',
        'color': nodeModel.configDict.componentStyle.colorForBtn1,
        'background': nodeModel.configDict.componentStyle.backgroundColorForBtn1,
        'border': nodeModel.configDict.componentStyle.borderColorForBtn1 + ' solid 1px',
        'border-radius': nodeModel.configDict.componentStyle.borderRadiusForBtn1/2 + 'px',
        'font-size': nodeModel.configDict.componentStyle.fontsizeForBtn1/2 + 'px',
        'font-weight': nodeModel.configDict.componentStyle.fontweightForBtn1,
        'margin-right': nodeModel.configDict.componentStyle.marginRightForBtn1/2 + 'px'
      }">{{nodeModel.configDict.componentStyle.titleForBtn1}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
        nodeModel:{
            type: Object,
            default: res=>{}
        },
    },
    data() {
      return {
        
      }
    },
    
    methods:{

    }
  }
</script>

<style lang="scss" scoped>

</style>